<template>
  <div>
    <el-dialog v-model="yzm" title="请完成验证码验证" width="350px" height="329px" :before-close="handleClose">

      <div class="imagebox">
        <div class="originalImage" @mousemove="onmove"
          :style="`background-image:url(${obj.originalImageBase64});background-repeat:no-repeat; `">
          <div class="jigsawImage" @mousedown="onpress" @mouseup="onrelease"
            :style="`left:${SliderLeft}px; background-image:url(${obj.jigsawImageBase64}) ; background-repeat: no-repeat; `">
          </div>

        </div>
        <div class="slider_box" @mousemove="onmove">
          <div :style="`width:${SliderLeft}px; background-color: ${Slidercolor} ;`" class="slider_left"></div>
          <div @mousedown="onpress" @mouseup="onrelease" :style="`left:${SliderLeft}px;`" class="slider">></div>
          滑动进行验证
        </div>

      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import axios from '../../utils/request'
import { getID } from './getId'
import {AES_Encrypt,encrypt} from "./encrypt"
import {
  defineComponent,
  ref,
  defineEmits,
  getCurrentInstance,
  ComponentInternalInstance,
  onMounted,
  defineProps,
  toRefs,
  reactive,
} from 'vue'
import {useRouter } from "vue-router"
import { ElMessageBox } from 'element-plus'
import { sl } from 'element-plus/es/locale'
const props = defineProps(["yzm", "obj","ruleForm"])
const { yzm, obj } = toRefs(props)
const emit = defineEmits(["eventI", "mounted"])
const router=useRouter()
const handleClose = () => {
  emit("eventI", yzm)
}
const SliderLeft = ref(0)
const Slidercolor = ref("blue")
const location = reactive(
  {
    locationX: 0,
    locationY: 0,
  }
)
// 确定是否按下 
const imageflag = ref(false)
// pointJson 返回的坐标
const poinjson = ref("")
// 提示信息
const message = ref("")

const time = ref(0)
const starttime = ref(0)
const endtime = ref(0)
// 图片拼图鼠标按下事件
const onpress = (e: any) => {
  imageflag.value = true
  location.locationX = e.pageX
  location.locationY = e.pageY
  starttime.value = new Date().getTime()
  console.log(e)
}
// 图片拼图滑动事件
const onmove = (e: any) => {
  if (imageflag.value) {
    SliderLeft.value = e.pageX - location.locationX
    if (SliderLeft.value <= 0) {
      SliderLeft.value = 0
    } else if (SliderLeft.value >= 250) {
      SliderLeft.value = 250
    }
  }
}
// 图片拼图滑动抬起事件
const onrelease = (e: any) => {
  imageflag.value = false
  poinjson.value = AES_Encrypt(JSON.stringify({ x: SliderLeft.value, y: 5.0 }), props.obj.secretKey)
  endtime.value = new Date().getTime()
  time.value = (endtime.value - starttime.value) / 1000
  //验证结果
  oncheck()
}
const oncheck = async () => {
  let res: any = await axios.post("/captcha/check", {
    captchaType: "blockPuzzle",
    pointJson: poinjson.value,
    token: props.obj.token
  })
  console.log(res)
  if (res.data.repCode == "0000") {
    onLogin()
  } else {
    alert("滑动不正确")
    setTimeout(() => {
      emit("mounted")
      SliderLeft.value = 0
    }, 500)
  }
}
const onLogin = async () => {
  // imageflag.value = true
  message.value = "验证成功"
  let res:any = await axios.post("/adminLogin",
    {
      userName: props.ruleForm.user,
      // passWord:"vEMVpB6UYzB9UkZhSjG4dQwJUDFEUWH1+D8IfdbG+e8=",
      passWord: encrypt(props.ruleForm.pass),
      t: new Date().getTime(),
      captchaVerification: AES_Encrypt(props.obj.token + "---" + JSON.stringify({ x: SliderLeft.value, y: 5.0 }), props.obj.secretKey)
    })
      window.localStorage.setItem("token",res.data.accessToken)
      router.push("/home/index")
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.imagebox {
  width: 300px;
  background-color: #eee;
  height: 200px;
  padding: 5px 0 5px 0;
  position: relative;
  text-align: center;
  line-height: 50px;
}

.originalImage {
  position: absolute;
  width: 300px;
  height: 160px;
}

.jigsawImage {
  position: absolute;
  width: 50px;
  height: 100%;
}

.slider_left {
  width: 300px;
  background-color: #eee;
  height: 50px;
  padding: 5px 0 5px 0;
  bottom: 0;
  left: 0;
  position: absolute;
  text-align: center;
  line-height: 50px;
}

.slider_box {
  width: 300px;
  background-color: #eee;
  height: 50px;
  padding: 5px 0 5px 0;
  position: absolute;
  bottom: 0;
  text-align: center;
  line-height: 50px;

}

.slider {
  width: 50px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  color: #000;
  transform: 1s all;
}
</style>